<template>

        <div id="detailNote">
            <header class="mui-bar mui-bar-nav">
                <router-link tag="a" to="/home" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></router-link>
                <h1 class="mui-title">日记</h1>
            </header>
            <div class="mui-content" style="background-color: #fff;padding-left:10px;padding-right:10px;">
                <div>
                    <input readonly="readonly" v-model="note.title" style="height: 40px;width:100%;font-size: 16px;border: none;display: inline-block;"></input>
                    <span class="note-date" style="color: #ccc;font-size: 12px;display: inline-block;">{{note.date}}</span>
                </div>
                <div class="ch-img" v-for="(img,index) in note.imgs">
                    <img :src="img" style="max-width: 200px;max-height: 343px;border:2px solid #fff;">
                </div>
                <div id="content" style="-webkit-user-select:text;height: auto;min-height: 300px;">{{note.body}}</div>
            </div>
            <nav class="mui-bar mui-bar-tab">
                <a class="mui-tab-item " id="defaultTab">
                    <span class="mui-icon mui-icon-compose"></span>
                    <span class="mui-tab-label">编辑</span>
                </a>
                <div @click="delNote" class="mui-tab-item">
                    <span class="mui-icon mui-icon-trash"></span>
                    <span class="mui-tab-label">删除</span>
                </div>
            </nav>
    
    
        </div>
    </template>
    
    <script>
    
        export default {
            name: "detailNote",
            data() {
                return {
                    note: {},
                    noteId: '',
                }
            },
            methods: {
                goEdit: function () {
    
                }
                ,
                goHistory: function () {
                    this.$router.go('/home');
                },
                delNote: function () {
                    var btnArray = ['否', '是'];
                    var _this = this;
                    var curId = this.noteId;
                    this.mui.confirm('确定删除当前笔记？', '删除', btnArray, function (e) {
                        if (e.index == 1) {
                            var data = localStorage.getItem('note');
                            var userId = sessionStorage.getItem('userId');
                            var noteData = JSON.parse(data);
                            if (noteData) {
                                if (noteData.length == 1) {
                                    localStorage.removeItem('note');
                                } else {
                                    var newNotes = [];
                                    for (let i = 0; i < noteData.length; i++) {
                                        const data = noteData[i];
                                        var id = data.id;
                                        var _userId = data.userId;
                                        if (id != curId) {
                                            newNotes.push(data);
                                        }
                                    }
                                    localStorage.removeItem('note');
                                    localStorage.setItem('note', JSON.stringify(newNotes));
                                }
                            }
                        }
                        _this.mui.toast('删除成功', { duration: 'long', type: 'div' });
                        _this.$router.go('/home');
                    })
                }      
        },
        created: function () {
            this.mui('body').on('tap', 'a', function () { document.location.href = this.href; });
            this.mui('body').on('click', 'a', function () { document.location.href = this.href; });
            this.note = this.$route.query.note;
            this.noteId = this.note.id;
        },
    
        }
    
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
        header {
            background-color: #51a2e2;
        }
    
        header h1,
        a {
            color: #fff;
        }
    </style>